{% extends "base-left.html" %}
{% load staticfiles %}

{% block css %}
<link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
<link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
<!-- iCheck for checkboxes and radio inputs -->
{% endblock %}

{% block content %}

<!-- Content Header (Page header) -->
<section class="content-header margin-bottom">
  <ol class="breadcrumb">
    <li><a href=""><i class="fa fa-dashboard"></i>办公平台</a></li>
    <li class="active"><a href="{% url 'system' %}">系统</a></li>
    <li class="active"><a href="{% url 'system-basic:user' %}">用户管理</a></li>
  </ol>
</section>
    <!-- Main content -->
  <section class="content">
     <div id="devlist">
        <div class="box box-primary" id="liebiao">
            <div class="box-header">
                <div class="btn-group pull-left">
                    <button type="button" id="btnRefresh" class="btn btn-default">
                        <i class="glyphicon glyphicon-repeat"></i>刷新
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnCreate" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>新增
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnDelete" class="btn btn-default">
                        <i class="glyphicon glyphicon-trash"></i>删除
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnEnable" class="btn btn-default">
                        <i class="glyphicon glyphicon-ok-circle"></i>启用
                    </button>
                    <button type="button" id="btnDisable" class="btn btn-default">
                        <i class="glyphicon glyphicon-ban-circle"></i>禁用
                    </button>
                </div>
                <div class="btn-group pull-right">
                    <form class="form-inline">
                        <div class="form-group">
                            <label>用户状态：</label>
                            <select id="select" name="select" class="form-control">
                                <option style='text-align:center' value=''>-----所有-----</option>
                                <option value="True">启用</option>
                                <option value="False">禁用</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
            <div class="box-body">
                <table id="dtbList" class="display" cellspacing="0" width="100%">
                    <thead>
                    <tr valign="middle">
                        <th><input type="checkbox" id="checkAll"></th>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>手机</th>
                        <th>邮箱</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>上级</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <br> <br>
            </div>
        </div>
     </div>
  </section>

    <!-- /.content -->

{% endblock %}

{% block javascripts %}
  <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
  <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
  <!-- iCheck 1.0.1 -->
  <script type="text/javascript">
	$(function() {
	    $('#SYSTEM-BASIC').addClass('active');
		$('#SYSTEM-BASIC-USER').addClass('active');

	});
  </script>

    <script type="text/javascript">
var oDataTable=null;
$(function() {
	oDataTable = initTable();
	function initTable() {
		var oTable=$('#dtbList').DataTable($.extend(true,{},
						DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
						{
							ajax : {
								"url":"{% url 'system-basic:user-list' %}",
								"data":function ( d ) {
									d.select=$("#select").val();
								}
						},
						columns : [
								DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
								{
									data : "id",
									width : "5%",
								},
								{
									data : "name",//parent
									width : "10%",
								},
								{
									data : "gender",
									width : "10%",
                                    render : function(data, type, row, meta) {
										if (data=='male'){
											return "男";
										}else{
											return "女";
										}
									}
								},
								{
									data : "mobile",
								},
								{
									data : "email",
								},
                                {
									data : "department__title",
								},

                                {
                                    data : "post",
								},
                                {
                                    data : "superior__name",
								},
                                {
                                    data : "is_active",
                                    render : function(data) {
										if (data==true){
											return "启用";
										}else{
											return "禁用";
										}
									}
								},
								{
									data : "id",
									width : "12%",
									bSortable : "false",
									render : function(data, type, row, meta) {
										var ret="";
										var ret="<button title='详情-编辑' onclick='doUpdate("
										+ data + ")'><i class='glyphicon glyphicon-pencil'></i></button>";
										 ret=ret+"<button name='btnChangepasswd' title='修改密码' onclick='doChangepasswd("
                                            + data + ")'><i class='glyphicon glyphicon-asterisk'></i></button>";
										 ret=ret+"<button name='btnConfig' title='删除' onclick='doDelete("
                                            + data + ")'><i class='glyphicon glyphicon-trash'></i></button>";
										return ret;
									}
								} ],
						"order":[
                    [2, 'desc']
		 	           ],
						}));
		return oTable;
	}

	//checkbox全选
    $("#checkAll").on("click", function () {
        if ($(this).prop("checked") === true) {
            $("input[name='checkList']").prop("checked", $(this).prop("checked"));
            $('#example tbody tr').addClass('selected');
        } else {
            $("input[name='checkList']").prop("checked", false);
            $('#example tbody tr').removeClass('selected');
        }
    });


	$("#btnCreate").click(function() {
		var div=layer.open({
			type : 2,
			title : '新增',
			shadeClose : false,
			maxmin : true,
            area : [ '800px', '720px' ],
			content : '/system/basic/user/create',
			end : function() {
				//关闭时做的事情
				oDataTable.ajax.reload();
			}
		});
		layer.full(div)
	});

	$("#btnRefresh").click(function(){
		oDataTable.ajax.reload();
	});

	//批量删除
	$("#btnDelete").click(function() {
		if ($("input[name='checkList']:checked").length == 0){
			layer.msg("请选择要删除的记录");
			return ;
		}

		var arrId= new Array();
		$("input[name='checkList']:checked").each(function(){
			//alert($(this).val());
			arrId.push($(this).val());
		});

		sId=arrId.join(',');

		layer.alert('确定删除吗？', {
			title:'提示'
			,icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
			,time: 0 //不自动关闭
			,btn: ['YES', 'NO']
			,yes: function(index){
			 	layer.close(index);
			 	$.ajax({
					type: "POST",
					url : "{% url 'system-basic:user-delete' %}",
					data : {"id":sId, csrfmiddlewaretoken: '{{ csrf_token }}'},
					cache: false,
					success : function(msg) {
						if (msg.result){
							layer.alert("操作成功");
							oDataTable.ajax.reload();
						}else{
							//alert(msg.message);
							layer.alert("操作失败");
						}
						return ;
					}
				});
			}
		});
	});


	//批量启用
	$("#btnEnable").click(function() {
		if ($("input[name='checkList']:checked").length == 0){
			layer.msg("请选择要启用的用户");
			return ;
		}

		var arrId= new Array();
		$("input[name='checkList']:checked").each(function(){
			//alert($(this).val());
			arrId.push($(this).val());
		});

		sId=arrId.join(',');

		layer.alert('确定启用吗？', {
			title:'提示'
			,icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
			,time: 0 //不自动关闭
			,btn: ['YES', 'NO']
			,yes: function(index){
			 	layer.close(index);
			 	$.ajax({
					type: "POST",
					url : "{% url 'system-basic:user-enable' %}",
					data : {"id":sId, csrfmiddlewaretoken: '{{ csrf_token }}'},
					cache: false,
					success : function(msg) {
						if (msg.result){
							layer.alert("启用用户成功", {icon: 1});
							oDataTable.ajax.reload();
						}else{
							//alert(msg.message);
							layer.alert("启用用户失败", {icon: 5});
						}
						return ;
					}
				});
			}
		});
	});

	//批量禁用
	$("#btnDisable").click(function() {
		if ($("input[name='checkList']:checked").length == 0){
			layer.msg("请选择要禁用的用户");
			return ;
		}

		var arrId= new Array();
		$("input[name='checkList']:checked").each(function(){
			//alert($(this).val());
			arrId.push($(this).val());
		});

		sId=arrId.join(',');

		layer.alert('确定禁用吗？', {
			title:'提示'
			,icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
			,time: 0 //不自动关闭
			,btn: ['YES', 'NO']
			,yes: function(index){
			 	layer.close(index);
			 	$.ajax({
					type: "POST",
					url : "{% url 'system-basic:user-disable' %}",
					data : {"id":sId, csrfmiddlewaretoken: '{{ csrf_token }}'},
					cache: false,
					success : function(msg) {
						if (msg.result){
							layer.alert("禁用用户成功", {icon: 1});
							oDataTable.ajax.reload();
						}else{
							//alert(msg.message);
							layer.alert("禁用用户失败", {icon: 5});
						}
						return ;
					}
				});
			}
		});
	});

	$("#select").change(function(){
		//alert($("#select").val())
		oDataTable.ajax.reload();
	});


});
// 跳转到用户详情页面
function doUpdate(id){
	var div=layer.open({
		type : 2,
		title : '编辑',
		shadeClose : false,
    	maxmin : true,
		area : [ '800px', '650px' ],
		content : [ "{% url 'system-basic:user-detail' %}"+'?id='+id, 'no' ],
		end : function() {
			oDataTable.ajax.reload();
		}
	});
    layer.full(div)
}

// 跳转到用户密码修改
function doChangepasswd(id){
	layer.open({
		type : 2,
		title : '编辑',
		shadeClose : false,
    	maxmin : true,
		area : [ '850px', '600px' ],
		content : [ "{% url 'system-basic:user-adminpasswdchange' %}"+'?id='+id, 'no' ],
		end : function() {
			oDataTable.ajax.reload();
		}
	});
}

//删除单个用户
function doDelete(id){
    layer.alert('确定删除吗？', {
        title:'提示'
        ,icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
        ,time: 0 //不自动关闭
        ,btn: ['YES', 'NO']
        ,yes: function(index){
            layer.close(index);
            $.ajax({
                type: "POST",
                url : "{% url 'system-basic:user-delete' %}",
                data : {"id":id, csrfmiddlewaretoken: '{{ csrf_token }}'},  //防止post数据时报 csrf_token 403
                cache: false,
                success : function(msg) {
                    if (msg.result){
                        layer.alert(msg.message,{icon: 1});
                        oDataTable.ajax.reload();
                    }else{
                        //alert(msg.message);
                        layer.alert('删除失败', {icon: 5});
                    }
                    return ;
                }
            });
        }
    });

}

</script>
{% endblock %}